import React from 'react'
import style from './index.less'
import {connect} from 'dva';
import { helper } from '../../../../utils';

import {Tree} from 'antd';
const TreeNode = Tree.TreeNode;


class MenuList extends React.Component {
  state = {
    expandedKeys:this.props.menu.theRoleMenus.map(item=>item.menuCode),
    autoExpandParent: true,
    checkedKeys: this.props.menu.checkedKeys||this.props.menu.theRoleMenus.filter(item=>item.bEnabled===1).map(item=>item.menuCode),
    selectedKeys: [],
    data:this.props.menu.theRoleMenus,
    treeData:[{
    	title: '全部',
    	key:'root',
    	id: 'root',
    	children:helper.arrayToTree(this.props.menu.theRoleMenus.map(item=>({
    		title: item.menuText,
    		key: item.menuCode,
    		id: item.menuCode,
    		pid: item.parentMenu,
    	})))
    }]
  }
  componentDidMount(){
    this.props.dispatch({
			type:`menu/getTheRoleMenus`,
			payload:{
        roleCode:this.props.menu.currentRoleCode,
      },
		})
  }
  componentWillReceiveProps(nextProps){
    this.setState({
      expandedKeys:nextProps.menu.theRoleMenus.map(item=>item.menuCode),
      checkedKeys: nextProps.menu.checkedKeys||nextProps.menu.theRoleMenus.filter(item=>item.bEnabled===1).map(item=>item.menuCode),
      data:nextProps.menu.theRoleMenus,
      treeData:[{
      	title: '全部',
      	key:'root',
      	id: 'root',
      	children:helper.arrayToTree(nextProps.menu.theRoleMenus.map(item=>({
      		title: item.menuText,
      		key: item.menuCode,
      		id: item.menuCode,
      		pid: item.parentMenu,
      	})))
      }]
    })
  }
  onExpand = (expandedKeys) => {
    this.setState({expandedKeys, autoExpandParent: false})
  }
  onCheck = (checkedKeys) => {
    this.setState({checkedKeys})
    const newKeys=[]
    const pushParentMenu=(keysArr,key)=>{
      const node=this.state.data.find(iitem=>iitem.menuCode===key)
      if(node){
        const parent=node.parentMenu
        if(parent&&keysArr.indexOf(parent)===-1){
          keysArr.push(parent)
          pushParentMenu(newKeys,parent)
        }
      }

    }
    checkedKeys.map((item,i)=>{
      pushParentMenu(newKeys,item)
      newKeys.push(item)
    })
    this.props.dispatch({
      type:`menu/setState`,
      payload:{
        setupMenus:newKeys,
        checkedKeys,
      },
    })
  }
  onSelect = (selectedKeys, info) => {
    this.setState({selectedKeys})
  }
  renderTreeNodes = (data) => {
    return data.map((item,i) => {
      if (item.children) {
				const myProps={
					title:item.title,
				  key:item.key,
					dataRef:item,
				}
        return (
          <TreeNode {...myProps}>
            {this.renderTreeNodes(item.children)}
          </TreeNode>
        )
      }
      return <TreeNode key={i} {...item}/>
    })
  }
  render() {
		const myProps={
			checkable:true,
			onExpand:this.onExpand,
			expandedKeys:this.state.expandedKeys,
			autoExpandParent:this.state.autoExpandParent,
			onCheck:this.onCheck,
			checkedKeys:this.state.checkedKeys,
			onSelect:this.onSelect,
			selectedKeys:this.state.selectedKeys,
		}
    return (
      <Tree {...myProps}>
        {this.renderTreeNodes(this.state.treeData)}
      </Tree>
    )
  }
}

export default connect(({menu}) => ({menu}))(MenuList)
